import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Dimensions,
} from 'react-native';

/* cg */
import {
  Button,
  TextInput,
  Image,
  TouchableHighlight,
  TouchableOpacity,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { NavigationActions } from 'react-navigation';
import { Config } from '../../public/js/config';
/* cg end */

let that;
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const cssHeight = 90;
export default class PublicHeader extends Component {
  /**
   * 公共头部
   * back:  boolean||false:隐藏||true:显示*||是否需要后退功能
   * title: String||标题显示
   * rightTitle:右侧显示的内容||可支持文字图片图标等||如:修改(字符串)||search(图片名)
   * rightType: int||1:字符串*||0:图片
   * shadow: boolean||false:隐藏||true:显示*||是否需要阴影
   * 参考地址：www.baidu.com
   */
  constructor(props) {
    super(props);
    this.state = {
      navigation: null,
      back: true,
      title: '',
      rightTitle: '',
      rightType: 1,
      shadow: true,
    };
  }
  // 加载方法
  componentDidMount() {
    this.init();
    this.initCss();
  }
  init() {
    that = this;
    navigation = this.props.navigation;
    if (this.props.back != null) {
      this.state.back = this.props.back;
    }
    if (this.props.title != null) {
      this.state.title = this.props.title;
    }
    if (this.props.rightTitle != null) {
      this.state.rightTitle = this.props.rightTitle;
    }
    if (this.props.rightType != null) {
      this.state.rightType = this.props.rightType;
    }
    if (this.props.shadow != null) {
      this.state.shadow = this.props.shadow;
    }

    this.setState(this.state);
  }
  initCss() { }
  back() {
    that.callBack();
  }
  callBack() {
    that.props.callBack();
  }
  render() {
    return (
      <>
        <View style={[styles.body, this.state.shadow ? styles.bodyOn : {}]}>
          <LinearGradient
            start={{ x: 1, y: 1 }}
            end={{ x: 2, y: 2 }}
            colors={Config.app.window.btnBackgroundColor}
            locations={[0.5, 0.5]}
            style={{ width: '100%', height: cssHeight * px }}>
            <View style={styles.header}>
              <View style={styles.headerLeft}>
                {this.state.back ? (
                  <TouchableOpacity onPress={this.back}>
                    <View>
                      {/* <Image style={styles.leftImg} source={{uri: 'returns'}} /> */}
                    </View>
                  </TouchableOpacity>
                ) : (
                  <></>
                )}
              </View>
              <View style={styles.headerCenter}>
                <Text style={styles.headerCenterText}>{this.state.title}</Text>
              </View>
              <View style={styles.headerRight}>
                {this.state.rightType == 1 ? (
                  <Text style={styles.headerRightText}>
                    {this.state.rightTitle}
                  </Text>
                ) : (
                  <></>
                )}
                {this.state.rightType == 0 ? (
                  <View style={{ position: 'relative', flex: 1 }}>
                    <Image
                      style={styles.rightImg}
                      source={{ uri: this.state.rightTitle || 'search' }}
                      resizeMode={'contain'} // 'cover', 'contain', 'stretch', 'repeat', 'center'
                    />
                  </View>
                ) : (
                  <></>
                )}
              </View>
            </View>
          </LinearGradient>
        </View>
      </>
    );
  }
  jump(str = 'MainRegister') {
    navigation.dispatch(NavigationActions.navigate({ routeName: str }));
  }
}

const styles = StyleSheet.create({
  body: {
    backgroundColor: '#ffffff',
    height: cssHeight * global.px,
  },
  bodyOn: {
    shadowColor: '#ffffff', //  阴影颜色
    shadowOffset: { width: 1, height: 1 }, // 阴影偏移
    elevation: 10,
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 10, //  圆角
  },
  centerLayout: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    flexDirection: 'row',
    flex: 1,
  },
  headerLeft: {
    flex: 1,
    paddingLeft: 30 * global.px,
    justifyContent: 'center',
  },
  leftImg: {
    width: 38 * global.px * 0.6,
    height: 68 * global.px * 0.6,
  },
  headerCenter: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerCenterText: {
    color: '#fff',
    fontSize: 34 * global.px,
  },
  headerRight: {
    flex: 1,
    paddingRight: 30 * global.px,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  headerRightText: {
    color: '#fff',
    fontSize: 34 * global.px,
  },
  rightImg: {
    width: 100 * global.px,
    height: 100 * global.px,
    position: 'absolute',
    right: -30 * global.px,
    top: 0,
  },
});

/*
案例:
import PublicHeader from './../../iframe/PublicHeader';

<PublicHeader
    title={'demo'}
    // hideLeftArrow={true}
    navigation={this.props.navigation}
/>
*/
